<!--
  * @Description 字典管理 字典项列表
  * @Author 莫发达
  * @create 2024-09-19 11:11 周四
-->
<script setup lang="ts">
import { ref, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'
import type { IDict } from '@root/types/system/dict.ts'
import { $dictLabel } from '@/utils/dict.ts'

const props = defineProps<{
  dictList: IDict[]
}>()
const emits = defineEmits<{
  (e: 'change', row: IDict): void
}>()

const search = ref('')

/**
 * 计算列表
 */
const computedList = computed(() => {
  return props.dictList.filter((item) => item.dictName.includes(search.value) || item.dictCode.includes(search.value))
})

/**
 *
 * @param row
 */
function onDictChange(row: IDict) {
  emits('change', row)
}
</script>

<template>
  <aside class="flex flex-col gap-4">
    <el-input
      v-model="search"
      placeholder="搜索字典分类名称或字典键名"
      :suffix-icon="Search"
      clearable
    />

    <el-table
      :data="computedList"
      highlight-current-row
      border
      @current-change="onDictChange"
    >
      <el-table-column
        type="index"
        label=""
        width="60"
      />
      <el-table-column
        prop="dictCode"
        label="前/后端键名"
      />
      <el-table-column
        width="140"
        prop="dictName"
        label="字典分类名称"
      />

      <el-table-column
        width="75"
        prop="enableFlag"
        label="类型"
      >
        <template #default="{ row }">
          <el-tag :type="row.type ? 'warning' : 'primary'">
            {{ row.type ?? '后端' }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        width="75"
        prop="enableFlag"
        label="状态"
      >
        <template #default="{ row }">
          <!-- 字典 启用/禁用标识	10:启用	20:禁用-->
          <el-tag :type="row.enableFlag === '10' ? 'success' : 'danger'">
            {{ $dictLabel('enableFlag', row.enableFlag) }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
  </aside>
</template>

<style scoped lang="less"></style>
